<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${isNew} ? '创建新任务' : '编辑任务'"></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
          crossorigin="anonymous">
</head>
<body>

<div class="container mt-5">
    <h1 class="mb-4" th:text="${isNew} ? '创建新任务' : '编辑任务'"></h1>

    <form th:action="${isNew} ? @{/todos} : @{/todos/{id}(id=${todo.id})}"
          th:object="${todo}" method="post">

        <input type="hidden" th:field="*{id}" />

        <div class="mb-3">
            <label for="description" class="form-label">任务描述：</label>
            <input type="text" th:field="*{description}" id="description"
                   class="form-control" required placeholder="输入任务内容">
        </div>

        <div class="mb-3 form-check" th:if="${!isNew}">
            <input type="checkbox" th:field="*{completed}" id="completed" class="form-check-input">
            <label for="completed" class="form-check-label">已完成</label>
        </div>

        <button type="submit" class="btn btn-success" th:text="${isNew} ? '创建任务' : '保存修改'">
            保存
        </button>

        <a th:href="@{/todos}" class="btn btn-secondary ms-2">取消并返回列表</a>
    </form>
</div>
</body>
</html>